<template>
  <div class="options" :style="{ height : height }">
    <div class="key">{{title}}</div>
    <div class="value" @click="selected">
      {{tip}}
    </div>
    <i @click="selected" class="right-icon iconfont icon-xiangxia2"></i>
    <mt-popup
      style="width: 100%;border-top: 1px solid #EDF1F5"
      v-model="popupVisible"
      :modal="false"
      position="bottom">
      <div class="checkBox" v-for="(value, idx) in item" @click="selectedOptions(value, idx)">
        <div>
          {{value.key}}
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Popup, DatetimePicker } from 'mint-ui'
import { Group, XNumber } from 'vux'

export default {
  components: {
    Group,
    XNumber
  },
  props: {
    item: '',
    height: {
      type: String,
      default: '2em'
    },
    keys: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      popupVisible: false,
      tip: ''
    }
  },
  watch: {

  },
  methods: {
    selected () {
      this.popupVisible = true
    },
    selectedOptions (value, key) {
      this.popupVisible = false
      this.tip = value.key
      this.$emit('selected', this.keys, key, value)
    },
  },
  created () {

  },
  mounted () {

  }
}
</script>
<style lang="less">
  .weui-cell:before {
    border: none !important;
  }
</style>
<style scoped lang="less">

.options {
  width: 100%;
  background: #FFFFFF;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  border: 1px solid #EDF1F5;
  width: 20em;
  align-items: center;
  .checkBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 0.5em 0;
    div {
      font-size: 1.5em;
      padding-right: 1.45em;
    }
  }

  .key {
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: #7A7AAB;
    position: relative;
    &:after {
      content: '';
      background: #E9E9E9;
      height: 1.3em;
      position: relative;
      width: 1px;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .value {
    flex: 3;
    display: flex;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    padding-left: 1.8em;
    align-items: center;
    font-size: 1em;
    color: #4D66FF;
    font-weight: 500;
  }
}
.right-icon {
  flex: 0.8;
  color:  rgba(102,102,102,0.25);
  font-size: 1.5em;
}
.vux-number-input {
  font-size: 1.6rem !important;
}
.mint-popup-bottom {
  max-height: 200px;
  overflow: scroll;
  &::-webkit-scrollbar {
    width: 2px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(77, 99, 235, 0.3);
  }
}
.x-number {

}
</style>

